<%@ page import="org.gnomus.server.Context" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="org.gnomus.server.C" %>
<%
  UserService us = Context.us;
  String sign_html = us.isUserLoggedIn() ? "Sign Out" : "Sign In";
  String sign_onclick = "window.location.href = '" +
    (us.isUserLoggedIn() ? us.createLogoutURL("/") : us.createLoginURL("/")) + "';";
%>
<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body style="opacity:0;">
<style type="text/css">
  button {
    zoom: 0.8;
  }

  div.page {
    width: 100%;
    height: 100%;
    min-width: 800px;
    min-height: 480px;
    position: relative;
  }

  div.page p {
    font-family: Helvetica, Arial, sans-serif;
  }

  button.inline {
    zoom: 0.67;
    bottom: 2px;
  }

  div#top {
    width: 100%;
    height: 100px;
    background: -moz-linear-gradient(top, rgba(105, 156, 183, 1) 0%, rgba(154, 191, 207, 1) 62%, rgba(159, 194, 209, 0.7) 68%, rgba(184, 212, 222, 0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(105, 156, 183, 1)), color-stop(62%, rgba(154, 191, 207, 1)), color-stop(68%, rgba(159, 194, 209, 0.7)), color-stop(100%, rgba(184, 212, 222, 0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(105, 156, 183, 1) 0%, rgba(154, 191, 207, 1) 62%, rgba(159, 194, 209, 0.7) 68%, rgba(184, 212, 222, 0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(105, 156, 183, 1) 0%, rgba(154, 191, 207, 1) 62%, rgba(159, 194, 209, 0.7) 68%, rgba(184, 212, 222, 0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(105, 156, 183, 1) 0%, rgba(154, 191, 207, 1) 62%, rgba(159, 194, 209, 0.7) 68%, rgba(184, 212, 222, 0) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(105, 156, 183, 1) 0%, rgba(154, 191, 207, 1) 62%, rgba(159, 194, 209, 0.7) 68%, rgba(184, 212, 222, 0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#699cb7', endColorstr = '#00b8d4de', GradientType = 0); /* IE6-9 */
  }

  div#middle {
    height: 40%;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
    padding-top: 8px;
    background: rgba(255, 255, 255, 0.5);
  }

  div#middle p {
    text-align: center;
  }

  div#bottom {
    z-index: -4096;
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    min-height: 160px;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(184, 212, 222, 0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(184, 212, 222, 0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(154, 191, 207, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(184, 212, 222, 0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(184, 212, 222, 0) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(154, 191, 207, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFFFFF', endColorstr = '#00b8d4de', GradientType = 0); /* IE6-9 */
  }

  button.navigation {
    margin: 16px 32px;
  }
</style>
<script type="text/javascript">
  $(document).ready(function () {
    $("body").css({ opacity:1});
  });
  function showAccessCodeDialog() {
    var width = 800;
    var access_code = $("#access_code");
    access_code.dialog({ title:"Access Code", resizable:false, modal:true,
      position:[0.5 * ($(window).width - width), 100], width:width, height:240 });
  }
  function showSamplesDialog() {
    var width = 600;
    var samples = $("#samples");
    samples.dialog({ title:"Samples", resizable:false, modal:true,
      position:[0.5 * ($(window).width - width), 100], width:width, height:160 });
    samples.find("button").blur();
  }
</script>
<div class="page a-center">
  <div id="top">
    <div id="menu" style="width:800px; margin: 0 auto;">
      <table style="width:100%;">
        <tr>
          <td class="a-left">
            <button class="navigation" onclick="showAccessCodeDialog();">Access Code</button>
            <button class="navigation" onclick="showSamplesDialog();">Samples</button>
          </td>
          <td class="a-right">
            <%
              if (us.isUserLoggedIn()) {
            %>
            <button class="navigation" onclick="window.location.href = '/teach'">Teach</button>
            <%
              }
            %>
            <button class="navigation" onclick="<%= sign_onclick %>"><%= sign_html %>
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="middle" class="a-left" style="zoom:125%; width:640px; margin:0 auto;">
    <div style="background:rgba(255,255,255,0.5);min-height:200px;border-radius:32px;">
      <h3 class="a-center">
        Welcome to Gnomus Labs.
      </h3>
      <br/>

      <p>
        If you have an access code, click
        <button class="inline" onclick="showAccessCodeDialog()">Access Code</button>
        to use it.
      </p>
      <br/>

      <p>
        If you'd like to check out one of our samples, click
        <button class="inline" onclick="showSamplesDialog();">Samples</button>
        .
      </p>
      <br/>

      <p>
        <%
          if (!us.isUserLoggedIn()) {
        %>
        If you'd like to check out the teach console, you'll have to
        <button class="inline" onclick="window.location.href = '<%= us.createLoginURL("/") %>'">Sign In</button>
        first.
        <%
        } else {
        %>
        If you'd like to check out the teach console, click
        <button class="inline" onclick="window.location.href = '/teach'">Teach</button>
        .
        <%
          }
        %>
      </p>
    </div>
  </div>
  <div id="bottom"></div>
</div>
<div id="access_code" class="d-none">
  <div class="a-center" style="width:720px;margin:0 auto;">
    <table class="a-center" style="width:100%;height:100%;">
      <tr>
        <td>
          <form action="/lab" method="post">
            Enter your access code :
            <input name="code" type="text"/>
            <input class="zoom-125" type="submit"/>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          <hr/>
        </td>
      </tr>
      <tr>
        <td>
          or
        </td>
      </tr>
      <tr>
        <td>
          <hr/>
        </td>
      </tr>
      <tr>
        <td>
          <form action="/lab" method="post">
            Select your access code :
            <%
              for (int i = 0; i < C.codes.length; i++) {
                String[] codes = C.codes[i];
            %>
            <select name="code_<%= i %>">
              <%
                for (String code : codes) {
              %>
              <option><%= code %>
              </option>
              <%
                }
              %>
            </select>
            <%
              }
            %>
            <input class="zoom-125" type="submit"/>
          </form>
        </td>
      </tr>
    </table>
    <%--
            <%
                Map errors = Context.get().errors;
                if (errors.containsKey("code")) {
            %>
            <hr />
            <div style="color:rgba(128,0,0,0.8);font-size:20px;">
                <%= errors.get("code") %>
            </div>
            <%
                }
            %>
    --%>
  </div>
  <div id="samples" class="d-none">
    <table class="a-center" style="width:100%;height:100%">
      <tr>
        <td>
          Currently, we have two samples up and running :
        </td>
      </tr>
      <tr>
        <td>
          <button onclick="window.location.href='/lab/periodic_squares';">Periodic Squares</button>
          and
          <button onclick="window.location.href='/lab/atomic_nuclei';">Atomic Nuclei</button>
        </td>
      </tr>
    </table>
  </div>
</div>
</body>